<!--
//题目1：全名计算--------------------
<script setup>
import { ref,computed } from 'vue';
const allName=computed(()=>{
return firstName.value+lastName.value
});
let firstName=ref('')
let lastName=ref('')
</script>

<template>
  <div>
    <span>姓：</span>
    <input type="text" v-model="firstName">
    &nbsp;
    <span>名：</span>
    <input type="text" v-model="lastName">
  </div>
  <br>
  <div>姓名为：{{allName}}</div>
</template>
<style>
</style>
-->
<!--
//题目2：价格计算--------------------

<script setup>
import { ref,computed } from 'vue';
const allNumber=computed(()=>{
  return firstNumber.value*lastNumber.value
});
let firstNumber=ref('')
let lastNumber=ref('')
</script>
<template>
<div>
  <input type="text" v-model="firstNumber">&nbsp;<input type="text" v-model="lastNumber">
</div>
<br>
<div>乘数为：{{allNumber}}</div>
</template>
-->
<!--
//题目3：过滤数据--------------------

<script setup>
import { ref,computed } from "vue";


let arr =  ref(['dingdongji','xiyiji','choushuimatong'])
let noneName = ref('')
let allName = computed(()=>{
  let keyWord = noneName.value.toLowerCase()
  return arr.value.filter(arrs=>arrs.toLowerCase().includes(keyWord))
})


</script>
<template>
<div>
  <div><input type="text" placeholder="请输入关键词" v-model="noneName"></div>
  <div>
    <ul>
      <li v-for="arrs in allName" :key="arr">{{arrs}}</li>
    </ul>
  </div>
</div>
</template>
-->
<!--题目4：格式化日期--------------------
<script setup>
import moment from 'moment';
import {ref,computed} from 'vue';

const fordate = ref('')
let time = computed(()=>{
  const date = moment(fordate.value).format("YYYY-MM-DD")
  

  return date
  
})
</script>
<template>
  <div>
    <div><input type="text" placeholder="输入日期(YYYY-MM-DD)" v-model="fordate"></div>
    <div>格式化日期：{{ time }}</div>
  </div>
</template>-->
<!--题目5：动态样式--------------------
<template>
  <div>
    <div>
      <input type="text" placeholder="输入背景颜色(#ff0000)" v-model="backColor">
    </div>
    <div class="box"
    :style="{backgroundColor:backColorss}"
    >这是一个动态背景颜色的盒子</div>
  </div>
</template>
<style>
.box{
  margin-top: 20px;
  width: 1000px;
  height: 50px;
  color: white;
}
</style>
<script setup>
import{ref,computed} from "vue"
const backColor = ref("");
let backColorss = computed(()=>{
  return backColor.value
}
)

</script>
-->
<!--题目6：综合表单练习--------------------
<template>
  <div>
    <div>
      <table>
       <tbody>
        <tr>
          <td>用户名：</td>
          <td><input type="text" placeholder="用户名" v-model="useName"></td>
        </tr>
        <tr>
          <td>年龄：</td>
          <td><input type="text" placeholder="年龄" v-model="useAgo"></td>
        </tr>
        <tr>
          <td>性别：</td>
          <td><input type="radio" name="Sex"  value="男"  v-model="useSex">男 &nbsp;&nbsp;&nbsp;<input type="radio" name="Sex" value="女" v-model="useSex">女</td>
        </tr>
       </tbody>
      </table>
    </div>
    <div>
      <h3 style="font-weight: bolder;">用户信息摘要：</h3>
      <table>
       <tbody>
        <tr>
          <td>用户名：</td>
          <td>{{ getName }}</td>
        </tr>
        <tr>
          <td>年龄：</td>
          <td>{{ getAgo }}岁</td>
        </tr>
        <tr>
          <td>性别：</td>
          <td>{{ getSex }}</td>
        </tr>
       </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
const useName=ref("")
const useAgo=ref("")
const useSex=ref("")


let getName = computed(()=>{
  return useName.value
})
let getAgo = computed(()=>{
  return useAgo.value ||0
})
let getSex=computed(()=>{
 return useSex.value
})
</script>
-->